import { Card, Col, Row, Statistic } from 'antd';
import { UserOutlined, TeamOutlined, AppstoreOutlined, DollarOutlined } from '@ant-design/icons';

export default function Dashboard() {
  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1128}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="创作者数量"
              value={93}
              prefix={<TeamOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="应用数量"
              value={256}
              prefix={<AppstoreOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总收入"
              value={11280}
              prefix={<DollarOutlined />}
              precision={2}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} className="mt-4">
        <Col xs={24} md={12}>
          <Card title="最近活动">
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span>新用户注册</span>
                <span className="text-gray-500">10分钟前</span>
              </div>
              <div className="flex justify-between items-center">
                <span>新应用发布</span>
                <span className="text-gray-500">30分钟前</span>
              </div>
              <div className="flex justify-between items-center">
                <span>创作者认证</span>
                <span className="text-gray-500">1小时前</span>
              </div>
              <div className="flex justify-between items-center">
                <span>系统更新</span>
                <span className="text-gray-500">2小时前</span>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title="待处理事项">
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span>创作者认证申请</span>
                <span className="text-red-500">5个待处理</span>
              </div>
              <div className="flex justify-between items-center">
                <span>内容审核</span>
                <span className="text-red-500">12个待处理</span>
              </div>
              <div className="flex justify-between items-center">
                <span>用户反馈</span>
                <span className="text-red-500">8个待处理</span>
              </div>
              <div className="flex justify-between items-center">
                <span>系统告警</span>
                <span className="text-red-500">2个待处理</span>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
} 